<template>
    <view class="container">
        <input class="search" type="text" placeholder="请输入关键字搜索">
        <view class="nav">
            <view class="nav-item" :class="{ 'select': modal }" @tap="modal = true">所属地区<view
                    :class="{ 'arrow-down': !modal, 'arrow-up': modal }"></view>
            </view>
            <view class="nav-item">院校类型<view class="arrow-down"></view>
            </view>
            <view class="nav-item">办学类型<view class="arrow-down"></view>
            </view>
            <view class="nav-item">院校层次<view class="arrow-down"></view>
            </view>
            <view class="board" v-if="modal" @touchmove.stop.prevent="moveHandle">
                <view class="board-content">
                    <view class="board-item" v-for="item in schoolType" :key="item">{{ item }}</view>
                </view>
                <view class="board-footer">
                    <button class="button">重置</button>
                    <button class="button" @tap="confirm">确定</button>
                </view>
                <view class="gray" @tap.stop="modal = false"></view>
            </view>
        </view>
        <view class="university-list">
            <view class="university-item" v-for="item in universityList" :key="item.id">
                <image :src="item.link" mode="aspectFill" />
                <view class="university-item-center">
                    <view class="title"> {{ item.name }}</view>
                    <view class="tag">
                        <text>高职高专</text> / &nbsp;<text>北京</text> / <text>综合</text>
                    </view>
                </view>
                <view class="university-item-right" v-if="!item.isSelect">+对比</view>
                <view class="university-item-right select" v-if="item.isSelect">已加入</view>
            </view>
        </view>
        <view class="pagination">
            <view>{{ 1 }}</view>
            <view v-if="currentPage > 4" class="ellipsis">...</view>
            <view class="page" v-for="(page, index) in visiblePages" :key="index">
                <view :class="{ active: currentPage === index }" @click="changePage(index)">{{ page + 1 }}</view>
            </view>
            <view v-if="currentPage < visiblePages.length - 4" class="ellipsis">...</view>
            <view @click="changePage(totalPages)">{{ totalPages + 1 }}</view>
        </view>
        <view class="circle" :class="{ 'bottom': isCompare }" @tap="isCompare = !isCompare">
            对比{{compareUniversityList.length}}/4
        </view>

        <view class="compare-board" v-if="isCompare" @touchmove.stop.prevent="moveHandle" :style="containerStyle">
            <view class="gray" @tap.stop="isCompare = false" :style="containerStyle"></view>
            <view class="content">
                <view class="header">
                    <view>对比大学（<text class="primary">{{ compareUniversityList.length }}</text>/4）</view>
                    <view class="clear" @tap.stop="clearCompare">清空全部</view>
                </view>
                <view class="list">
                    <view class="university-item" v-for="item in compareUniversityList" :key="item.id">{{ item.name }}
                    </view>
                </view>
                <view class="footer">
                    <button class="button">开始对比</button>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script>
import { universityList } from '../index/indexData'
import { schoolType } from './data'
export default {
    data() {
        return {
            universityList,
            schoolType,
            currentPage: 1,
            totalPages: 255, // 总页数
            visiblePages: [], // 可见页码
            modal: false,
            isCompare: false,
            containerStyle: {}, // 视图容器的样式
            compareUniversityList: [{
                id: '1', name: '北京协和医学院'
            }, {
                id: '2', name: '中国人民公安大学'
            }]
        };
    },
    mounted() {
        this.updateVisiblePages();
        // 获取屏幕信息
        uni.getSystemInfo({
            success: (res) => {
                // 设置视图容器的宽高
                this.containerStyle = {
                    width: res.windowWidth + "px",
                    height: res.windowHeight + "px"
                };
            }
        });
    },
    methods: {
        changePage(index) {
            this.currentPage = index;
            this.updateVisiblePages();
            // 处理页码切换逻辑
        },
        updateVisiblePages() {
            let range = 4; // 中心附近显示的页码数量
            this.visiblePages = [];
            for (let i = 0; i <= range; i++) {
                this.visiblePages.push(this.currentPage - range);
                range--
            }
        },
        clearCompare() {
            this.compareUniversityList = []
        },
        moveHandle() {
            return false
        },
        confirm() {
            this.modal = false
        }
    }
};
</script>
  
<style lang="less" scoped>
@primary: #d01117;

.primary {
    color: @primary;
}

.container {
    padding: 30upx;
    background-color: white;
}

.fixed-100 {
    display: fixed;
    height: 100vh;
    overflow: hidden;
}

.search {
    width: calc(100% - 50upx);
    height: 80upx;
    border: 1px solid #ede9e9;
    border-radius: 15upx;
    margin-bottom: 30upx;
    padding: 0 25upx;
}

.nav {
    display: flex;
    position: relative;
    height: 40upx;
    line-height: 40upx;

    .board {
        position: absolute;
        background-color: #fff;
        top: 40upx;
        left: 0;
        width: 100%;
        z-index: 1;

        .board-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .board-content::after {
            content: '';
            width: 150upx;
        }

        .board-content:last-child {
            justify-content: flex-start;
        }

        .board-item {
            width: 150upx;
            height: 60upx;
            line-height: 60upx;
            background-color: #eceff1;
            text-align: center;
            margin: 10upx 0;
        }

        .gray {
            height: 100vh;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            position: fixed;
        }

        .board-footer {
            display: flex;
            padding: 30upx 5upx;

            .button {
                width: 325upx;
                height: 80upx;
                line-height: 80upx;
                text-align: center;
                font-size: 28upx;
                border-radius: 5upx;
            }

            .button:nth-child(2) {
                background-color: @primary;
                color: #fff;
            }
        }
    }

    .nav-item {
        width: 25%;
        display: flex;


        .arrow-up {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid @primary;
            position: relative;
            margin-left: 5upx;
            top: 15upx;
            transform: rotate(180deg);
        }
    }

    .select {
        color: @primary;
    }
}

.university-list {
    .university-item {
        position: relative;
        display: flex;
        height: 200upx;
        justify-content: flex-start;
        border-bottom: 1upx solid #e6e6e6;

        image {
            width: 150upx;
            height: 150upx;
            margin-top: 25upx;
        }

        .university-item-center {
            position: relative;
            top: 50%;
            height: 80upx;
            width: 430upx;
            padding: 0 30upx;
            transform: translateY(-50%);

            .title {
                font-size: 32upx;
                font-weight: 700;
                margin-bottom: 20upx;
            }
        }

        .university-item-right {
            width: 100upx;
            height: 50upx;
            border: 1upx solid #999999;
            border-radius: 10upx;
            color: #666666;
            text-align: center;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            line-height: 50upx;
        }

        .university-item-right.select {
            color: white;
            background-color: #d01117;
            border: 1upx solid #d01117;
        }
    }
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page {
    margin: 0 5px;
    cursor: pointer;
}

.active {
    font-weight: bold;
}

.ellipsis {
    margin: 0 5px;
}

.circle {
    width: 80upx;
    height: 80upx;
    background-color: #fe4a3c;
    color: #fff;
    font-size: 24upx;
    border-radius: 50%;
    text-align: center;
    line-height: 30upx;
    padding: 10upx 0;
    position: fixed;
    bottom: 500upx;
    right: 30upx;
    z-index: 999;
}

.bottom.circle {
    bottom: 270upx;
}

.compare-board {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    width: 100vh;
    font-size: 28upx;

    .content {
        background-color: #fff;
        height: 600upx;
        position: fixed;
        width: 100%;
        bottom: 0;
    }

    .gray {
        height: 100vh;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        position: fixed;
    }

    .header {
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-between;
        padding: 0 30upx;
        height: 60upx;
        line-height: 60upx;


        .clear {
            color: @primary;
        }
    }

    .footer {
        position: fixed;
        padding: 0 30upx;
        bottom: 150upx;
        width: 100%;

        .button {
            background-color: @primary;
            color: #fff;
        }
    }
    .university-item{
        height: 75upx;
        line-height: 75upx;
        border-bottom: 1upx solid #ececec;
        padding: 0 30upx;
    }

}
</style>